;(function () {

    const template = `<!--体育栏目-->
        <div>
            <ul>
                <li v-for="item in sportArr"  :key="item.id">
<!--                    <a href="#">{{item.title}}</a>-->
                    <!-- 要动态拼接值，则to 属性值是js表达式，要写js表达式，则要使用v-bind 方式绑定属性，注意 + 前面需要单引号 -->
                    <router-link :to="'/news/sport/detail/'+item.id">
                    {{item.title}}
                    </router-link>
                </li>
            </ul>
        
         
         <!-- 详情  -->
            <router-view></router-view>
         
        </div>`;

    window.Sport = {
        template,
        data() {
            return {
                sportArr: []
            }
        },
        created() {
            this.getSportArr();
        },
        methods: {
            getSportArr() {
                axios.get("http://localhost:63342/vue-mxg/vue-08-router/02-bootstrap-ajax-router/sport.json").then(item => {
                    this.sportArr = item.data;
                }).catch(error => {
                    console.log(error.message)
                })
            }
        }
    };
})();
